<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
    @close="closeModal"
  >
    <el-form ref="form" :model="form" :show-message="false" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="证型名称" prop="name" required>
            <el-input
              v-model.trim="form.name"
              placeholder="请输入证型名称"
              :maxLength="20"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证型首字母" prop="firstLetter">
            <el-input
              v-model.trim="form.firstLetter"
              placeholder="不输入则自动生成首字母"
              clearable
              @blur="pinyinToggle"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="证型简介" prop="note">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入证型简介"
          v-model="form.note"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="证型建议处方" required>
        <SelectPrescription ref="SelectPrescription" :unitList="unitList" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addTCM, updateTCM } from "@/api/saas/tcm.js";
import { titleToggle } from "@/utils/index";
import pinyin from "js-pinyin";
import SelectPrescription from "../prescription/selectPrescription";
import { getSelectList } from "@/api/system/unit";
import { getUuid } from '@/utils/index.js'

export default {
  components: {
    SelectPrescription,
  },
  data() {
    return {
      title: "新增证型",
      open: false,
      form: {
        id: undefined,
        name: "",
        firstLetter: "", // 首字母
        note: "", // 简介
        prescriptIds: undefined, // 多个处方id,逗号隔开
        regionPrescriptIds: undefined, // 多个模板处方id,逗号隔开
      },
      unitList: [],
    };
  },
  methods: {
    openModal(row) {
      if(row){
        for (const key in this.form) {
          this.form[key] = row[key];
        }
        this.title = "编辑证型";
      }
      this.open = true;
      getSelectList({ pageNum: 1, pageSize: 999 }).then(res => {
        this.unitList = res.rows;
      })
      // 回显特殊处理
      this.$nextTick(()=>{
        this.$refs.SelectPrescription.prescriptItems = row && row.prescriptList ? row.prescriptList.map(v=> {
          return { ...v, uuid: getUuid(10) };
        }) : [];
        this.$refs.SelectPrescription.regionPrescriptItems = row && row.regionPrescriptList ? row.regionPrescriptList.map(v=> {
          return { ...v, templateId: v.id, templateName: v.name, uuid: getUuid(10) }
        }) : [];
      })
    },
    closeModal() {
      this.$refs["form"].resetFields();
      this.$refs.SelectPrescription.remoteMethod('');
      this.$refs.SelectPrescription.checkedId = undefined;
      this.$refs.SelectPrescription.prescriptItems = [];
      this.$refs.SelectPrescription.regionPrescriptItems = [];
      Object.assign(this.$data, this.$options.data()); // 存在自定义校验规则不能重置data
    },
    pinyinToggle() {
      this.form.firstLetter = titleToggle(this.form.firstLetter);
    },
    /** 提交按钮 */
    submitForm() {
      const that = this;
      let prescriptIds =  that.$refs.SelectPrescription.prescriptItems.map(v=> v.id); // 多个处方id
      let regionPrescriptIds = that.$refs.SelectPrescription.regionPrescriptItems.map(v=> v.templateId); // 多个模版处方id

      that.$refs["form"].validate(async (valid) => {
        if (valid) {
          if(!prescriptIds.length && !regionPrescriptIds.length){
            that.$message.error("请选择证型建议处方");
            return
          }else{
            that.form.prescriptIds = prescriptIds.join(",");
            that.form.regionPrescriptIds = regionPrescriptIds.join(",");
          }

          if (!that.form.firstLetter) {
            // 未填写首字母,自动生成
            let str = pinyin.getCamelChars(that.form.name);
            that.form.firstLetter = titleToggle(str);
          }
          if (that.form.id) {
            await updateTCM(that.form);
          } else {
            await addTCM(that.form);
          }
          that.$message.success(that.form.id ? "修改成功" : "新增成功");
          that.$emit("refresh");
          that.open = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
